<style>
    #loadingBox { width: 200px; height: 200px; text-align: center; line-height: 200px; background: #f0f0f0; position: relative }

</style>

<div class="page">
    <h1>等待框 Loading</h1>
    <div class="line"></div>

    <br>
    <p>使用方法</p>
    <pre class="line-numbers"><code class="language-js">// 创建loading对象
icu.loading([jqueryObject],[options])
// [jqueryObject] 传入jquery对象（对象必须包含 position: relative / absolute / fixed )
// 该对象默认不进行传值时，默认对象为 $('body');

// [options] 为 参数对象，
// {
//     className: '', // 自定义 class 样式名称
//     loadingText: 'LOADING', // 自定义显示文字
// }

// 创建方法1 (全局加载loading)
var loading = icu.loading();

// 使用方法2
var loading = icu.loading(this.$el.find('#loadingBox'),{
    className: 'loading_view', // 自定义 class 样式名称
    loadingText: '测试', // 自定义显示文字
});

// 显示loading  
loading.show();

// 隐藏loading
loading.hide();



</code></pre>
    <button type="button" type="button" class="layui-btn layui-btn-normal" id="show">显示loading</button>
    <button type="button" type="button" class="layui-btn layui-btn-normal" id="hide">隐藏loading</button>
    <br><br>
    <div id="loadingBox">需要加载loading的Div</div>
    <br>
    <p>示例代码</p>
    <br>
    <pre class="line-numbers"><code class="language-js">// 创建loading对象
var loading = icu.loading(this.$el.find('#loadingBox'), {
    loadingText: '测试文字'
});

// 显示loading
this.$el.find('#show').click(() => {
    loading.show();
});

// 隐藏loading
this.$el.find('#hide').click(() => {
    loading.hide();
});</code></pre>

</div>